<template>
  <div class="screen" :style="baseStyle" ref="screen" @mouseenter="showName=true" @mouseleave="showName=false" :class="{border:showName}">
    <label v-if="showName&&name" class="name">屏幕:{{name}}</label>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name:'screen',
    props:{
      name:String,
      w:{
        type:Number,
        default:1920
      },
      h:{
        type:Number,
        default:1080
      },
      //inner:Boolean,  //是否是内屏,用于内外屏切换
      bg:String,
      bgPosition:String, //背景图偏移
      link:Boolean, //是否是联屏
    },
    data(){
      return {
        baseStyle:{},
        showName:false,
        inner:false, //是否是内屏,用于内外屏切换
      }
    },
    methods:{
      resize(){
        let style = {}
        if(!this.inner){
          style.position = 'absolute'
          style.top = '50%'
          let clientWidth = document.body.clientWidth
          style.height = this.h+'px'
          style.width = this.w+'px'
          //style.transform =  `translateY(-50%) `
          let scale = clientWidth/this.w
          style.transform =  `translateX(-${(this.w-this.w* scale)/2}px) translateY(-50%)  scale(${scale})`
          //style.zoom = clientWidth/this.w
          
        }
        if(this.bg){
          style.backgroundImage = `url(${this.bg})`
        }
        if(this.bgPosition){
          style.backgroundPosition = this.bgPosition
        }
        this.baseStyle = style
      }
    },
    mounted(){
        this.resize()
        window.onresize = this.resize
        if(this.link){
          this.$root.$emit('inner')
        }
    },
    created(){
      if(!this.link){
        this.$root.$on('inner',()=>{
          this.inner = true
          this.resize()
        })
      }
      
    }
  }
</script>

<style lang="scss" scoped>
.screen{
  height: 100%;
  width: 100%;
  overflow: hidden;
  position:relative;
  background-repeat: no-repeat;
  //background-size: 100% 100%;
  &.border{
    border: 2px solid red;
  }
}
.name{
  position:absolute;
  top:20px;
  left: 20px;
  color: red;
  font-size: 40px;
}
</style>